<template>
	<view class="examine">
		<view class="select s28 family f500">
			{{detail.dispatch.nickname}}
		</view>
		<view class="header_box">
			<view class="head_title s28 familytow fblod">
				推荐人信息
			</view>
			<view class="detail_box flex">
				<view class="list_box flex">
					<view class="left_txt s26 family f500">
						推荐人
					</view>
					<view class="right_txt s26 family f500">
						{{detail.user.nickname}}
					</view>
				</view>
				<view class="list_box flex">
					<view class="left_txt s26 family f500">
						联系方式
					</view>
					<view class="right_txt s26 family f500">
						{{detail.user.mobile}}
					</view>
				</view>
				<view class="list_box flex">
					<view class="left_txt s26 family f500">
						会员级别
					</view>
					<view class="right_txt s26 family f500">
						{{detail.user.identity_name}}
					</view>
				</view>
				<view class="list_box flex">
					<view class="left_txt s26 family f500">
						推荐日期
					</view>
					<view class="right_txt s26 family f500">
						{{get_date(detail.createtime)}}
					</view>
				</view>
			</view>
		</view>
		<view class="customer_box">
			<view class="customer_txt s28 familytow fblod">
				客户信息
			</view>
			<view class="c_user_info_box flex" v-for="(item,index) in detail.scopes" :key="index">
				<view class="user_name_box">
					<image class="w100 h100" src="../static/name.png" mode=""></image>
				</view>
				<view class="user_name_txt s26 family f500">
					{{item.username}}
				</view>
				<view class="user_phone_box">
					<image class="w100 h100" src="../static/phone.png" mode=""></image>
				</view>
				<view class="user_name_txt s26 family f500" @click="callPhone(item.mobile)">
					{{item.mobile}}
				</view>
			</view>
			<view class="detail_box flex">
				<view class="list_box flex">
					<view class="left_txt s26 family f500">
						生效时间
					</view>
					<view class="right_txt s26 family f500">
						{{get_date(detail.createtime) || ''}}
					</view>
				</view>
				<!-- <view class="list_box flex">
					<view class="left_txt s26 family f500">
						意向产品
					</view>
					<view class="right_txt s26 family f500">
						<block v-if="detail.product.length > 0">
							<text v-for="(itm, idx) in detail.product" :key="itm.id">{{idx != 0 ? ',' : ''}}{{itm.name}}</text>
						</block>
					</view>
				</view> -->
				<view class="list_box flex">
					<view class="left_txt s26 family f500">
						生效审核
					</view>
					<view class="right_txt s26 family f500">
						人工审核
					</view>
				</view>
			</view>
			<view class="detail_box flex" style="margin-top: 0;">
				<view class="list_box flex" style="width: unset;overflow: unset;text-overflow: unset;white-space: unset;">
					<view class="left_txt s26 family f500">
						意向产品
					</view>
					<view class="right_txt s26 family f500" style="word-wrap: break-word;flex: 1;">
						<!-- {{detail.product[0].name || ''}} -->
						{{detail.products || ''}}
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_btn flex" v-if="detail.status == 0||detail.status == 1">
			<view class="left_btn s32 familytow fblod txtali" @click="agree(4)">
				已跑单
			</view>
			<view class="right_btn s32 familytow fblod txtali" @click="agree(5)">
				无效单
			</view>
		</view>
	</view>
</template>

<script>
	import selectList from '@/components/selectList.vue'
	export default {
		components: {
			selectList
		},
		data() {
			return {
				background: '#ffffff',
				color: '#999999',
				list: [{
						name: "临洮世华洛珏婚纱摄影会馆"
					},
					{
						name: "临洮世华洛影会馆"
					},
					{
						name: "西红柿"
					}
				],
				detail: {},
				detailId: 0
			}
		},
		onLoad(option) {
			this.detailId = option.id
			this.getDetail(option.id)
		},
		methods: {
			getDetail(id){
				this.$request({
					url: 'manage/getCustomDetail',
					method: 'GET',
					data: {
						id: id
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.detail = res.data.data;
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
			agree(type) {
				uni.showLoading({
					title: "加载中"
				})
				this.$request({
					url: 'manage/setCustomStataus',
					data: {
						id: this.detailId,
						status: type
					}
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					})
					if(res.data.code == 1) {
						setTimeout(() => {
							uni.navigateBack({})
						},1000)
					}
				})
			},
			callPhone(data){
				if(data){
					uni.makePhoneCall({
						phoneNumber: data
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.examine {
		overflow: hidden;
		.select {
			width: 686upx;
			height: 88upx;
			background: #FFFFFF;
			border-radius: 8upx;
			margin: 20upx auto;
			padding-left: 42upx;
			line-height: 88upx;
			box-sizing: border-box;
			color: #844902;
		}
		.bottom_btn {
			margin-top: 40upx;
			padding: 0 32rpx;
			box-sizing: border-box;
			
			.left_btn, .right_btn{
				flex: 1;
			}

			.left_btn {
				height: 100upx;
				background: #f92672;
				border-radius: 50upx;
				color: #FFFFFF;
				line-height: 100upx;
			}

			.right_btn {
				height: 100upx;
				background: #B5B5B5;
				border-radius: 50upx;
				color: #FFFFFF;
				line-height: 100upx;
				margin-left: 32rpx;
			}
		}

		.customer_box {
			width: 686upx;
			min-height: 398upx;
			background: #FFFFFF;
			border-radius: 8upx;
			margin: 20upx auto;
			overflow: hidden;

			.customer_txt {
				margin-left: 40upx;
				margin-top: 28upx;
				color: #E4B77F;
			}

			.c_user_info_box {
				width: 624upx;
				height: 70upx;
				background: #FAFAFA;
				border-radius: 4upx 4upx 4upx 4upx;
				margin-left: 32upx;

				.user_name_box {
					width: 32upx;
					height: 32upx;
					border-radius: 50%;
					margin: 20upx 0 0 20upx;
				}

				.user_name_txt {
					color: #666666;
					line-height: 70upx;
					margin-left: 20upx;
				}

				.user_phone_box {
					width: 30upx;
					height: 30upx;
					border-radius: 50%;
					margin: 18upx 0 0 240upx;
				}
			}

			.c_user_info_box:nth-child(2) {
				margin-top: 32upx;
			}

			.detail_box {
				margin-top: 32upx;
				flex-wrap: wrap;
				margin-left: 32upx;

				.list_box {
					width: 292upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 30upx;
					margin-bottom: 26upx;

					.left_txt {
						width: 104upx;
						color: #999999;
					}

					.right_txt {
						color: #333333;
						margin-left: 16upx;
					}
				}
			}
		}

		.header_box {
			width: 686upx;
			height: 224upx;
			background: #FFFFFF;
			border-radius: 8upx;
			margin: 20upx auto;
			padding: 28upx 0 0 32upx;
			box-sizing: border-box;

			.head_title {
				color: #666666;
			}

			.detail_box {
				margin-top: 32upx;
				flex-wrap: wrap;

				.list_box {
					width: 292upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 30upx;
					margin-bottom: 26upx;

					.left_txt {
						width: 104upx;
						color: #999999;
					}

					.right_txt {
						color: #333333;
						margin-left: 16upx;
					}
				}
			}
		}
	}
</style>
<style>
	page {
		background-color: #F4F5F9;
	}
</style>
